<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{trainInfo.station_train_code}} Timetable</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container">
            <header class="header">
                <h1>{{trainInfo.station_train_code}}</h1>
                <p class="total-time">预计全程时间：{{totalTime}}</p>
                {{if nextStation}}
                <p class="next-station">下一站：{{nextStation.station_name}} ({{nextStation.arrive_time}})</p>
                {{/if}}
            </header>

            <div class="timetable">
                <div class="row header-row">
                    <span class="station">站点</span>
                    <span class="arrivals">预计到达</span>
                    <span class="departure">预计发车</span>
                    <span class="time-left">运行时间</span>
                </div>

                {{each stations station index}}
                <div class="row">
                    <span class="station">{{station.station_name}}</span>
                    <span class="arrivals">{{station.arrive_time}}</span>
                    <span class="departure">{{station.start_time}}</span>
                    <span class="time-left">{{station.running_time}}</span>
                </div>
                {{/each}}
            </div>
            {{@copyright}}
        </div>
    </body>
    <style>
    /* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f7f9fc;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
}

.container {
    background-color: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header {
    background-color: #0099cc;
    color: #fff;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    text-align: center;
}

.header h1 {
    font-size: 36px;
    margin-bottom: 8px;
}

.header .total-time {
    font-size: 18px;
}

/* Timetable Styles */
.timetable {
    padding: 20px;
}

.row {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.row:last-child {
    border-bottom: none;
}

.header-row {
    font-weight: bold;
    background-color: #f1f1f1;
}

.station, .arrivals, .departure, .time-left {
    width: 22%;
    text-align: center;
}

.station {
    font-size: 18px;
}

.arrivals, .departure, .time-left {
    font-size: 16px;
    color: #666;
}

.row:nth-child(odd) {
    background-color: #f9f9f9;
}

.row:hover {
    background-color: #f0f8ff;
}

.current-station {
    color: #fff;
    background-color: #52c41a;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 8px;
}

.next-station {
    color: #fff;
    background-color: #fa8c16;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .container {
        width: 95%;
    }
    
    .station, .arrivals, .departure, .time-left {
        width: 23%;
        font-size: 14px;
    }
    
    .header h1 {
        font-size: 28px;
    }
} 
 /* 版权信息样式 */
  .copyright {
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    font-size: 12px;
    color: #666;
    opacity: 0.8;
  }

  .copyright-info {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .copyright .version {
    color: #1a73e8;
    font-weight: 500;
  }
</style>
</html>